<template>
	<view class="page">
		<u-navbar :isBack="false" :isFixed="true" title="我的" titleColor="#FFFFFF" :background="background"
			:borderBottom="false"></u-navbar>
		<image class="bg" src="../../static/img/myback.png" mode="widthFix"></image>
		<navigator class="showlogin" v-if="showlogin" url="/home/login/login" hover-class="none"></navigator>
		<view class="flex_bet_align top">
			<view class="flex_align" style="flex: 1;">
				<view class="border">
					<image class="avatar" :src="info.avatar"></image>
				</view>
				<view v-if="!showlogin">
					<view class="name clamp2">{{info.nickname}}</view>
					<view class="phone">{{info.mobile_text}}</view>
				</view>
				<view v-if="showlogin">
					<view class="name">点击登录</view>
				</view>

			</view>
			<view class="flex_align">
				<view class="iconfont icon-checkin sign" @click="signday" v-if="!issignIn">
					<text>送积分</text>
				</view>
				<view class="iconfont icon-checkin sign" v-else>
					<text>已签到</text>
				</view>
				<navigator url="/personal/orderMsg" hover-class="none" class="iconfont icon-xiaoxi message">
					<text v-if="showred!=''">{{showred}}</text>
				</navigator>
			</view>
		</view>
		<view class="data flex_bet_align">
			<!-- <navigator url="/chat/metionme?type=2" hover-class="none" class="item">
				<view class="count">{{info.follow_num}}</view>
				<view class="title">我的关注</view>
			</navigator> -->
			<!-- <navigator url="/personal/wallet" hover-class="none" class="item">
				<view class="count">{{wallet.countBalance?wallet.countBalance:0}}</view>
				<view class="title">账户余额</view>
			</navigator> -->
			<!-- <navigator url="/personal/wallet" hover-class="none" class="item">
				<view class="count">{{wallet.withdrawalMoney?wallet.withdrawalMoney:0}}</view>
				<view class="title">可提现</view>
			</navigator>
			<navigator url="/personal/wallet" hover-class="none" class="item">
				<view class="count">{{wallet.countProfit?wallet.countProfit:0}}</view>
				<view class="title">累计</view>
			</navigator> -->
		</view>
		<view class="rights">
			<view class="flex">
				
				<view @click="toshop" class="item flex">
					<view>
						<view class="title" style="color:#DFFFDD;">我的苗店</view>
						<view class="msg" style="color:#758F74;">管理苗店赚收益</view>
					</view>
					<image src="../../static/img/wdmd.png"></image>
				</view>
				<view class="item flex" @click="getPointsMall">
					<view>
						<view class="title" style="color:#FFD9D7;">积分商城</view>
						<view class="msg" style="color:#7C6260;">用积分兑换好物</view>
					</view>
					<image src="../../static/img/jfsc.png"></image>
				</view>
			</view>
			<!-- <view class="flex" style="margin-top:20rpx;"></view>
			<navigator url="/home/oracle/managecenter" hover-class="none" class="item">
					<view class="flex liner">
						<view>
							<view class="title" style="color:#E0F7FF;">认证管理</view>
							<view class="msg" style="color:#5F7D88;">交易须实名认证</view>
						</view>
						<image src="../../static/img/rzgl.png"></image>
					</view>
				</navigator>
			</view>  -->
			<!-- <view class="flex" style="margin-top:20rpx;">
				<navigator class="item" hover-class="none" url="/personal/vipCenter">
					<view class="flex liner">
						<view>
							<view class="title">会员中心</view>
							<view class="msg">享专属会员权益</view>
						</view>
						<image src="../../static/img/hyzx.png"></image>
					</view>
				</navigator>
				<navigator url="/home/oracle/managecenter" hover-class="none" class="item">
					<view class="flex liner">
						<view>
							<view class="title" style="color:#E0F7FF;">认证管理</view>
							<view class="msg" style="color:#5F7D88;">交易须实名认证</view>
						</view>
						<image src="../../static/img/rzgl.png"></image>
					</view>
				</navigator>
				
			</view> -->
		</view>

		<view class="card flex_align" style="height: 140rpx;">
			<navigator :url="'/personal/myIntegral?integral='+info.score" hover-class="none" class="menu">
				<view class="count">{{info.score}}</view>
				<view style="font-size: 26rpx;">积分</view>
			</navigator>
			<navigator :url="'/personal/reputation?reputation='+info.credit_value" hover-class="none" class="menu">
				<view class="count">{{info.credit_value}}</view>
				<view style="font-size: 26rpx;">信誉值</view>
			</navigator>
			<navigator url="/personal/footprint" hover-class="none" class="menu">
				<view class="count">{{info.footprint_num}}</view>
				<view style="font-size: 26rpx;">足迹</view>
			</navigator>
		</view>

		<view class="card flex_align">
			<navigator url="/personal/collection" hover-class="none" class="flex_align item">
				<view class="clect">
					<view class="clectnum"><text style="margin-right: 20rpx;">我的收藏</text>
						{{info.collect_num?info.collect_num:''}}
					</view>
					<view class="clectxt">查看心仪产品收藏</view>
				</view>
				<image src="../../static/img/scback.png" mode="aspectFit" class="cardimg"></image>
			</navigator>
		</view>

		<view class="orderlist flex_bet_align">
			<view class="orderbox" style="margin-right: 20rpx;">
				<view class="tit">供应</view>
				<navigator url="/personal/mySupply" hover-class="none" class="flex_align item">
					<image src="../../static/img/bbgj01.png"></image>
					<view class="comt">
						<view class="">我的供应</view>
						<view class="des">我发布的供应</view>
					</view>
				</navigator>

				<!-- <navigator url="/personal/supplyOrder" hover-class="none" class="flex_align item">
					<image src="../../static/img/dd05.png"></image>
					<view class="comt">
						<view class="">供应订单</view>
						<view class="des">查看供应订单</view>
					</view>
				</navigator> -->

				<navigator url="/personal/supplyList?type=0" hover-class="none" class="flex_align item">
					<image src="../../static/img/bbgj04.png"></image>
					<view class="comt">
						<view class="" style="position: relative;">
							<view class="number" v-if="lookGoods>0">{{lookGoods}}</view>
							<view class="">供应看货</view>
							<view class="des">查看供应看货</view>
						</view>
					</view>
				</navigator>
			</view>
			<view class="orderbox">
				<view class="tit">求购</view>
				<navigator url="/personal/myOffer" hover-class="none" class="flex_align item">
					<image src="../../static/img/bbgj02.png"></image>
					<view class="comt">
						<view class="">我的求购</view>
						<view class="des">我发布的求购</view>
					</view>
				</navigator>

				<!-- <navigator url="/personal/demandOrder" hover-class="none" class="flex_align item">
					<image src="../../static/img/dd051.png"></image>
					<view class="comt">
						<view class="">求购订单</view>
						<view class="des">查看求购订单</view>
					</view>
				</navigator> -->

				<navigator url="/personal/supplyList?type=1" hover-class="none" class="flex_align item">
					<image src="../../static/img/bbgj041.png"></image>
					<view class="comt">
						<view class="" style="position: relative;">
							<view class="number" v-if="buyGoodsNumber>0">{{buyGoodsNumber}}</view>
							<view class="">求购看货</view>
							<view class="des">查看求购看货</view>
						</view>
					</view>
				</navigator>

			</view>
		</view>

		<view class="card flex_align">
			<navigator url="/chat/yxCustomer" hover-class="none" class="flex_align item">
				<view class="clect">
					<view class="clectnum"><text style="margin-right: 20rpx;">意向客户</text>
						{{info.yxkh_num?info.yxkh_num:''}}
					</view>
					<view class="clectxt">查看被标记的意向客户</view>
				</view>
				<image src="../../static/img/scback.png" mode="aspectFit" class="cardimg"></image>
			</navigator>
		</view>

		<view class="newcard flex_bet_align">
			<navigator url="/personal/opportunity" hover-class="none" class="flex_align">
				<image src="../../static/img/bbgj03.png"></image>
				<view class="comt">
					<view class="">报价商机</view>
					<view class="des">查看报价商机</view>
				</view>
			</navigator>

			<navigator url="/personal/wallet" hover-class="none" class="flex_align">
				<image src="../../static/img/qb01.png"></image>
				<view class="comt">
					<view class="">我的钱包</view>
					<view class="des">可提现</view>
				</view>
			</navigator>
		</view>

		<view class="help">
			<view class="title">必备工具</view>
			<view class="grid">
				<navigator url="/personal/shopSort" hover-class="none" class="item">
					<image src="../../static/img/shop_sort.png"></image>
					<view class="title">店铺分类</view>
				</navigator>
				<navigator url="/personal/myAddress" hover-class="none" class="item">
					<image src="../../static/img/shdz.png"></image>
					<view class="title">收货地址</view>
				</navigator>
				<navigator url="/personal/fahuoaddress" hover-class="none" class="item">
					<image src="../../static/img/bbgj07.png"></image>
					<view class="title">发货地址</view>
				</navigator>
				<navigator url="/personal/evaluate" hover-class="none" class="item">
					<image src="../../static/img/bbgj06.png"></image>
					<view class="title">我的评价</view>
				</navigator>

				<navigator url="/chat/myVideo" hover-class="none" class="item">
					<image src="../../static/img/bbgj05.png"></image>
					<view class="title">短视频管理</view>
				</navigator>
			</view>
		</view>

		<view class="tools">
			<view class="title">帮助中心</view>
			<view class="grid">
				<navigator url="/personal/questions" hover-class="none" class="item">
					<image src="../../static/img/bzzx01.png"></image>
					<view class="title">常见问题</view>
				</navigator>
				<!-- <label class="item">
					<button class="bottom" open-type="contact"></button>
					<image src="../../static/img/bzzx02.png"></image>
					<view class="title">在线客服</view>
				</label> -->
				<navigator url="/personal/kefu" hover-class="none" class="item">
					<image src="../../static/img/bzzx02.png"></image>
					<view class="title">在线客服</view>
				</navigator>
				<navigator url="/personal/feedback" hover-class="none" class="item">
					<image src="../../static/img/bzzx03.png"></image>
					<view class="title">意见反馈</view>
				</navigator>
				<navigator url="/personal/setting" hover-class="none" class="item">
					<image src="../../static/img/bzzx04.png"></image>
					<view class="title">更多设置</view>
				</navigator>
				<navigator url="/personal/complaintMam" hover-class="none" class="item">
					<image src="../../static/img/bbgj08.png"></image>
					<view class="title">投诉管理</view>
				</navigator>
			</view>
		</view>

		<view style="height: 150rpx;"></view>
		<pagetabbar :currentIndex="currentIndex" :unread="unread"></pagetabbar>

		<view v-if="signstatus" class="signbox">
			<image src="../../static/img/qd.png" mode="widthFix"></image>
			<view class="signScore">
				积分<text>+{{integral}}</text>
			</view>
			<view class="tomorrow" @click="signstatus = false">明天再来</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				currentIndex: 4,
				unread: "",
				background: {
					backgroundColor: '#38BE8C'
				},
				info: '',
				showlogin: true,
				wallet: {},
				signstatus: false, //签到显示状态
				issignIn: false, //是否签到过
				// 积分数量
				integral: 0,

				showred: '', //是否显示订单小红点

				supplyOrder: '',
				buying: '',
				lookGoods: '',
				buyGoodsNumber: '',
			}
		},
		onLoad() {
			_this = this
		},
		onShow() {
			this.getInfo()
			_this.isSignin()
			this.ordernum()
			this.seeorder()
		},
		methods: {
			// 是否签到过
			isSignin() {
				if (uni.getStorageSync("client_uid")) {
					_this.$api.get("checksignin", {
						client_uid: uni.getStorageSync("client_uid")
					}).then(data => {
						_this.issignIn = data.code == 0 ? false : true
					});
				}
			},
			getInfo() {
				if (uni.getStorageSync("token")) {
					_this.$api.get("material", {}).then(data => {
						_this.info = data
						_this.showlogin = false
					});
					_this.$api.get("mywallet", {}).then(data => {
						_this.wallet = data
					});
				} else {
					_this.showlogin = true
				}
			},
			// 跳转积分商城
			getPointsMall() {
				uni.navigateTo({
					url: '/personal/pointsMall?integral=' + _this.info.score
				})
			},
			//签到
			signday: function() {
				_this.$api.islogin(() => {
					_this.$api.get("signin", {}).then(data => {
						_this.integral = data.score
						_this.signstatus = true
						_this.issignIn = true
					});
				})
			},

			// 查看是否有人下单 用于控制订单消息红点显示
			seeorder: function() {
				_this.$api.get("dingdong").then(data => {
					console.log(data, 'data.list')
					if (data != 0) {
						_this.showred = data
					}
				});
			},


			ordernum: function() {
				_this.$api.get("ordernumber").then(data => {
					console.log(data)
					_this.supplyOrder = data.supplyOrder
					_this.buying = data.buying
					_this.lookGoods = data.lookGoods
					_this.buyGoodsNumber = data.buyGoodsNumber
				});
			},

			//店铺禁用
			toshop() {
				if (_this.info.shop_status == 1) {
					uni.navigateTo({
						url: "/home/station/stationpage?operate=true"
					})
				} else {
					uni.showToast({
						title: '店铺已被禁用',
						icon: 'none',
					})
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.showlogin {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 999;
	}

	.page {
		background: #EEEEEE;
		position: relative;
		padding-bottom: 40rpx;
	}

	.bg {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.top {
		width: 750rpx;
		padding: 20rpx 30rpx;
		position: relative;
		z-index: 5;

		.border {
			width: 114rpx;
			height: 114rpx;
			background-color: #9EE2C9;
			border-radius: 50%;
			margin-right: 24rpx;

			.avatar {
				width: 114rpx;
				height: 114rpx;
				border-radius: 50%;
			}
		}

		.name {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #ffffff;
			margin-bottom: 15rpx;
			margin-right: 20rpx;
		}

		.phone {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #ffffff;
		}

		.sign {
			font-size: 36rpx;
			color: #FFFFFF;

			text {
				width: 49rpx;
				height: 22rpx;
				padding: 5rpx;
				position: relative;
				bottom: 20rpx;
				left: -10rpx;
				background: #ff9f3b;
				border-radius: 9rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #ffffff;
			}
		}

		.message {
			font-size: 50rpx;
			color: #FFFFFF;

			text {
				padding: 0px 18rpx;
				height: 40rpx;
				display: inline-block;
				line-height: 40rpx;
				font-weight: 700;
				text-align: center;
				border-radius: 20rpx;
				background: #FB4249;
				font-size: 20rpx;
				color: #fff;
				position: relative;
				bottom: 45rpx;
				left: -15rpx;
			}
		}
	}

	.data {
		position: relative;
		z-index: 5;
		margin-top: 30rpx;

		// position: relative;
		// z-index: 2;
		.item {
			flex: 1;
			text-align: center;

			.count {
				font-size: 38rpx;
				font-family: SF Pro Display, SF Pro Display-Medium;
				font-weight: 700;
				color: #ffffff;
				margin-bottom: 17rpx;
			}

			.title {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}

	.rights {
		position: relative;
		z-index: 5;
		width: 700rpx;
		// height: 250rpx;
		padding: 20rpx 25rpx;
		margin: 44rpx auto 0;
		background: #31373F;
		border-radius: 35rpx;
		color: #FFFFFF;

		// position: relative;
		// z-index: 2;
		.line {
			border-bottom: 1rpx solid rgba(230, 230, 230, .2);
		}

		.item {
			width: 330rpx;
			height: 100rpx;
			padding-left: 30rpx;
			box-sizing: border-box;

			.liner {
				border-right: 1rpx solid rgba(230, 230, 230, .2);
				margin-bottom: 20rpx;
			}

			.title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #ffebbf;
			}

			.msg {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				margin-top: 8rpx;
				color: #837a67;
			}

			image {
				width: 72rpx;
				height: 72rpx;
				margin-left: 20rpx;
				// background:#F1F1F1;
			}
		}
	}

	.card {
		position: relative;
		z-index: 5;
		width: 702rpx;
		height: 171rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 40rpx 20rpx;
		text-align: center;

		.menu {
			flex: 1;
			font-size: 22rpx;
			position: relative;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.iconfont {
				font-size: 48rpx;
			}

			.icon-blue {
				color: #54CAA1;
			}

			.number {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 60%;
				top: -20rpx;
				font-size: 20rpx;
				margin-left: 3rpx;
				height: 40rpx;
				width: 40rpx;
				border-radius: 20rpx;
				color: #FFFFFF;
				background-color: #fe2746;
			}
		}

		.count {
			font-size: 38rpx;
			font-family: SF Pro Display, SF Pro Display-Medium;
			font-weight: 500;
			color: #000000;
		}

		.cardimg {
			flex: 1;
			height: 171rpx;
		}

		.clect {
			flex: 1;
			text-align: left;
			margin-left: 20rpx;

			.clectnum {
				font-weight: bold;
				font-size: 32rpx;
			}

			.clectxt {
				margin-top: 15rpx;
				font-size: 24rpx;
			}
		}
	}

	.orderlist {
		width: 702rpx;
		background: #EEEEEE;
		border-radius: 16rpx;
		margin: 20rpx auto;

		.orderbox {
			background: #fff;
			padding: 40rpx 20rpx 0;
			flex: 1;
			border-radius: 16rpx;

			image {
				width: 81rpx;
				height: 81rpx;
				margin-right: 20rpx;
			}

			.tit {
				font-size: 36rpx;
				font-weight: bold;
			}

			.item {
				margin: 15rpx 0 45rpx;
			}

			.comt {
				color: #2A343F;
				font-size: 30rpx;
				font-weight: bold;

				.des {
					color: #BCC0C4;
					font-size: 24rpx;
					font-weight: normal;
				}
			}

			.number {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: -25rpx;
				right: -25rpx;
				font-size: 20rpx;
				margin-left: 3rpx;
				height: 40rpx;
				width: 40rpx;
				border-radius: 20rpx;
				color: #FFFFFF;
				background-color: #fe2746;
			}
		}
	}

	.newcard {
		width: 702rpx;
		height: 171rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 40rpx 60rpx;

		image {
			width: 81rpx;
			height: 81rpx;
			margin-right: 20rpx;
		}

		.comt {
			color: #2A343F;
			font-size: 30rpx;
			font-weight: bold;

			.des {
				color: #BCC0C4;
				font-size: 24rpx;
				font-weight: normal;
			}
		}
	}

	.tools {
		position: relative;
		z-index: 5;
		width: 702rpx;
		margin: 20rpx auto;
		padding: 36rpx 40rpx;
		background: #ffffff;
		border-radius: 16rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #000000;
		}

		.grid {
			display: grid;
			// grid-template-rows: repeat(2, 50%);
			grid-template-columns: repeat(4, 25%);

			.item {
				text-align: center;
				margin-top: 25rpx;
				position: relative;

				image {
					width: 81rpx;
					height: 81rpx;
					margin: 0 auto;
				}

				.title {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
				}
			}
		}
	}

	.help {
		width: 702rpx;
		padding: 36rpx 40rpx;
		margin: 20rpx auto;
		background: #ffffff;
		border-radius: 16rpx;

		.grid {
			display: grid;
			grid-template-columns: repeat(4, 25%);
		}

		.title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #000000;
			margin-bottom: 25rpx;
		}

		.item {
			flex: 1;
			text-align: center;

			image {
				width: 81rpx;
				height: 81rpx;
				margin: 0 auto;
			}

			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
			}
		}
	}

	.signbox {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba($color: #000000, $alpha: 0.8);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 10003;

		image {
			width: 520rpx;
			animation: bulingbuling 0.5s;

			@keyframes bulingbuling {
				0% {
					transform: scale(0.5);
				}

				50% {
					transform: scale(1.1);
				}

				100% {
					transform: scale(1);
				}
			}
		}

		.signScore {
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;

			text {
				font-size: 52rpx;
				color: #FFEE4D;
				margin-left: 10rpx;
			}
		}

		.tomorrow {
			margin-top: 74rpx;
			width: 176rpx;
			height: 54rpx;
			text-align: center;
			line-height: 54rpx;
			border-radius: 27rpx;
			border: 2rpx solid #fff;
			font-size: 28rpx;
			color: #fff;
		}
	}
</style>
